<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-11 11:54:33
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-12 20:25:06
 * @FilePath: \mobile\src\pages\LoginPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <van-nav-bar title="注册页" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="pass" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="password1" type="password" name="password" label="确认密码" placeholder="确认密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" @click="send">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { checkPhone, sendSms } from '../services'
import { showNotify } from 'vant'
import { router } from '../router';
//声明类型
type valuesType = {
    username: string,
    password: string,
    password1: string
}

const username = ref('');
const password = ref('');
const password1 = ref('');
const sms = ref('')

const onSubmit = async (values: valuesType) => {
    //检查验证码
    const { data } = await checkPhone(username.value)
    if (data.code === '10005') {
        showNotify({ message: '该用户已被注册' });
    } else if (data.code === '200') {
        //存储用户名和密码
        localStorage.setItem('username', values.username)
        localStorage.setItem('password', values.password);
    }
    //跳转
    if (localStorage.getItem('username') && localStorage.getItem('password')) {
        router.push('/home')
    }


}

//发送请求
const send = async () => {
    //定义正则
    const rex = /^1[3-9]\d{9}$/
    if (!rex.test(username.value)) {
        showNotify({ message: '手机号有误' });
    } else if (password.value === '' && password1.value === '') {
        showNotify({ message: '密码未填写' });
    } else if (password.value !== password1.value) {
        showNotify({ message: '两次密码不一致' });
    } else {
        await sendSms(username.value)
    }
}

//返回上一级
const onClickLeft = () => history.back();
</script>

<style lang="scss" scoped>

</style>